<template>
    <section class="content">
        <navbar :title="$t('bangding.title')" :right_show="false" :type="1" ref="navbar"></navbar>
        <section class="cont">
           <!-- <article v-if="user.phone">
                {{$t('bangding.yibangding')}}   {{user.phone}}
            </article>
            <article>
                <span>{{$t('bangding.shoujihao')}} </span>
                <input type="number" v-model="phone" :placeholder="$t('common.qingshuru') + $t('bangding.shoujihao')">
            </article>
            <article>
                <span>{{$t('bangding.yanzhengma')}} </span>
                <input type="number" v-model="code" :placeholder="$t('common.qingshuru') + $t('bangding.yanzhengma')">
                <i v-if="!fasong" @click="fun_huoqu">{{$t('zhuce.huoqu_btn')}}</i>
                <article v-else>
                    <van-count-down ref="countDown" @finish="finish" :time="time" format="ss"/>s
                </article>
            </article> -->
			<div class="shurukuangBox">
				<div class="item"  v-if="user.phone">
					<p>{{$t('bangding.yibangding')}}:</p> 
					<p>{{user.phone}}</p>
				</div>
				<div class="item">
					<p>{{$t('bangding.shoujihao')}}:</p>
					<input type="number" v-model="phone" :placeholder="$t('common.qingshuru') + $t('bangding.shoujihao')">
				</div>
				<div class="item">
					<p>{{$t('bangding.yanzhengma')}}: </p>
					<input type="number" v-model="code" :placeholder="$t('common.qingshuru') + $t('bangding.yanzhengma')">
					<i style="color: #fcc027;font-size: 12px;" v-if="!fasong" @click="fun_huoqu">{{$t('zhuce.huoqu_btn')}}</i>
					<article v-else>
					    <van-count-down ref="countDown" @finish="finish" :time="time" format="ss"/>s
					</article>
				</div>
			</div>
			<div class="buttBoxss" @click="fun_submit">
				{{$t('common.queren')}}
			</div>
        </section>
    </section>
</template>

<script>
    import navbar from "@/components/navbar"
    import { CountDown } from 'vant'
    export default {
        name: "bangdingshouji",
        components: {
            navbar,
            [CountDown.name]: CountDown
        },
        mounted() {

        },
        data() {
            return {
                time:  60 * 1000 * 2,
                fasong: false,
                phone: '',
                code: '',
                user: this.$store.state.user
            }
        },
        methods: {
            fun_huoqu() { //获取短信验证码
                if(this.phone == ''){
                    this.$toast(this.$t('common.qingshuru') + this.$t('bangding.yanzhengma'))
                }
                else{
                    ///处理
                    this.$https.fetchGet('/m/msgcode',{'phone' : this.phone}).then(res => {
                        this.$toast(res.status.msg)
                        this.fasong = true
                    }).catch(err => {
                        this.$toast('网络异常');
                    })

                }
            },
            finish() { //倒计时结束
                this.fasong = false
            },
            fun_submit() {  ///确认
                if(this.phone == ''){
                    this.$toast(this.$t('common.qingshuru') + this.$t('bangding.shoujihao'))
                }
                else if(this.code == ''){
                    this.$toast(this.$t('common.qingshuru') + this.$t('bangding.yanzhengma'))
                }
                else{
                    this.$https.fetchPost('/m/bindphone',{'phone': this.phone, 'code': this.code}).then(res => {
                        this.$toast(res.status.msg)
                        setTimeout( () => {
                            this.$router.push('gerenzhongxin')
                        },1000)
                    }).catch(err => {
                        this.$toast('网络异常');
                    })
                }
            }
        }
    }
</script>

<style scoped lang="less">
	.buttBoxss {
		width: 90%;
		height: 33px;
		color: #fff;
		font-size: 15px;
		line-height: 33px;
		margin: 0px auto;
		background: linear-gradient(#770c17, #441418);
		border-radius: 3px;
	}
	.shurukuangBox {
		width: 90%;
		margin: 30px auto 0;
	
		.item {
			display: flex;
			align-items: center;
			height: 33px;
			border: 1px solid #fcc027;
			border-radius: 5px;
			margin-bottom: 15px;
	
			p:nth-child(1) {
				padding: 0px 5px;
				text-align: center;
				background-color: #fcc027;
				color: #000;
				height: 33px;
				font-size: 15px;
				border-radius: 5px 0px 0px 5px;
				line-height: 33px;
			}
			p:nth-child(2) {
				padding-left: 10px;
				height: 33px;
				line-height: 33px;
				font-size: 14px;
				color: #fff;
			}
	
			input {
				width: 60%;
				color: #fff;
				padding-left: 10px;
				height: 33px;
				background: none;
				font-size: 14px;
				border: 0px;
			}
			article{
			    color: #fcc027;
			    width: 26%;
			    display: flex;
			    align-items: center;
			    div{
			        color: #fcc027;
			        margin-right: .1rem;
			    }
			}
		}
	}
.content{
	height: 100vh;
	width: 100%;
	background-image: url('../assets/images/dsfgds.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
    .cont{
        color: #fff;
	
        & > article{
            width: 90%;
            margin:0 auto;
            display: flex;
            padding: 0 .4rem;
            border: 1px solid #292d30;
            font-size: .4rem;
            line-height: 1.6rem;
            span{
                display: block;
                width: 20%;
                text-align: left;
            }
            input{
                width: 55%;
                color: #fff;
                border:none;
                background: transparent;
            }
            article{
                color: #fff;
                width: 26%;
                display: flex;
                align-items: center;
                div{
                    color: #fff;
                    margin-right: .1rem;
                }
            }
        }
        & > button{
            background: linear-gradient(to bottom, #eb5d4d 0%, #fb2464 100%) !important;
            font-size: .46rem;
            border-radius: .2rem;
            width: 92%;
            margin:1.5rem auto 0;
            border: none;
            line-height: 1.5rem;
        }
    }

}
</style>
